<template>
	<view class="task">
		<template v-if="taskList.length != 0">
			
		<view class="task-item" v-for="(item,index) in taskList">
			<view class="task-first" @click="change(index)">
				<view class="task-title">{{item.title}}</view>
				<view class="iconfont" :class="index === currentItemIndex ? 'icon-fangxiangshang' :'icon-fangxiangxia'"></view>
			</view>
			<view class="task-second" v-if="index === currentItemIndex" v-for="item1 in item.paperItems">
				<view class="task-second-item">
					<view class="task-second-item-title">{{item1.examPaperName}}</view>
					<view class="task-second-item-state" :style="{color:item1.status == 2 ? '' : '#E0620D'}">
						<view class="label" :style="{background : item1.status == 2 ? '' : 'rgba(224,98,13,.27)'}">
							<span v-if="item1.status == null">未完成</span>
							<span v-else-if="item1.status == 1" >待修改</span>
							<span v-else-if="item1.status == 2">已完成</span>
						</view>
						<view class="lookup" >
							<span v-if="item1.status == null" @click="navigatorToAnswer(item1.examPaperId)">开始考试</span>
							<span v-else @click="showPaperAnswer(item1.examPaperAnswerId)">查看试卷</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		</template>
		<view class="task-item" v-else>暂时无任务</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentItemIndex : 0,
				taskList:[]
			}
		},
		onLoad: function(){
			//获取token
			let token = uni.getStorageSync("token");
			console.log(!token);
			if( !token){
				// uni.showToast({
				// 	title: "请先登录！！"
				// })
				uni.redirectTo ({
					url: "/pages/login/login"
				});
			}
			this.getTaskList();
		},
		//监听下拉刷新
		onPullDownRefresh(){
			console.log("下拉刷新了");
			setTimeout( ()=>{this.getTaskList( ()=> {uni.stopPullDownRefresh()})},1000);
		},
		methods: {
			async getTaskList(callBack){
				const resp = await this.$myRequest({
					url: "/api/student/dashboard/task"
				});
				if(resp.data.code == 200){
					this.taskList = resp.data.obj;
				}
				callBack && callBack(); //关闭下拉刷新
			},
			//控制显示与隐藏
			change(i){
				console.log(i);
				this.currentItemIndex = i;
			},
			
			//跳转答题界面
			navigatorToAnswer(id){
				console.log("试卷id："+id);
				uni.navigateTo({
					url: "/pages/answer/answer?paperId="+id
				})
			},
			showPaperAnswer(id){
				console.log("答案id：",id);
				uni.navigateTo({
					url: "/pages/test-view/test-view?id="+id
				})
			}
		}
	}
</script>

<style lang="scss">
.task{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width:100%;
	box-sizing: border-box;
	margin: 34rpx 0;
	.task-item{
		width: 92%;
		background: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 24rpx 30rpx;
		font-size: 28rpx;
		margin-top: 40rpx;
		.task-first{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.task-title{
				font-size: 32rpx;
				color: #212121;
			}
			.iconfont{
				font-size: 48rpx;
				color: #C0C4CC;
			}
		}
		.task-second{
			width: 100%;
			margin-top: 40rpx;
			.task-second-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				
			}
			.task-second-item-state{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 10rpx;
				color:#66BB6A;
				.label{
					width: 84rpx;
					height: 40rpx;
					// border: 2rpx solid #66BB6A;
					background-color: rgba(102,187,106,0.27);
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 2rpx 14rpx;
				}
				.lookup{
					margin-left: 20rpx;
					letter-spacing: 2rpx;
				}
			}
		}
	}
	.task-item:first-child{
		margin-top: 0;
	}
}
</style>
